<template>
  <el-card class="companydetail-container">
    <div class="companydetail-header">
      <el-button type="text" @click.native.prevent="closeCompanyDetail">
        返回上一页</el-button
      >
      <div class="collect">
        <i :class="['el-icon-star-off', { active: isActive }]"></i>
        <span>{{ statusTitle }}</span>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 公司描述信息 -->
    <div class="companyInfo">
      <el-descriptions :title="cname">
        <el-descriptions-item label="法定代表人">{{
          lperson
        }}</el-descriptions-item>
        <el-descriptions-item label="统一社会信用代码">{{
          tycode
        }}</el-descriptions-item>
        <el-descriptions-item label="注册资本">{{
          rmoney
        }}</el-descriptions-item>
        <el-descriptions-item label="安许">{{ anxudate }}</el-descriptions-item>
        <el-descriptions-item label="企业经营地址">{{
          address
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 公司tab栏 -->
    <div class="companyTab">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane
          label="工商注册信息"
          name="first"
          class="businessInformation"
        >
          <el-descriptions
            direction="horizontal"
            :column="2"
            border
            :labelStyle="LS"
            :contentStyle="CS"
          >
            <el-descriptions-item
              :label="name"
              v-for="(value, name) in information[0]"
              :key="name"
              >{{ value }}</el-descriptions-item
            >
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane
          :label="'一级资质(' + num1 + ')'"
          name="second"
          class="firstQualification"
        >
          <el-table :data="one" highlight-current-row style="width: 100%">
            <!-- <el-table-column type="index" width="200"> </el-table-column> -->
            <el-table-column property="zizhi" label="资质种类">
            </el-table-column>
            <el-table-column property="date" label="到期时间">
            </el-table-column>
            <template slot="empty">
              <el-empty description="暂无资质"></el-empty>
            </template>
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          :label="'二级资质(' + num2 + ')'"
          name="third"
          class="secondQualification"
        >
          <el-table :data="two" highlight-current-row style="width: 100%">
            <!-- <el-table-column type="index" width="200"> </el-table-column> -->
            <el-table-column property="zizhi" label="资质种类">
            </el-table-column>
            <el-table-column property="date" label="到期时间">
            </el-table-column>
            <template slot="empty">
              <el-empty description="暂无资质"></el-empty>
            </template>
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          :label="'三级资质(' + num3 + ')'"
          name="fourth"
          class="thirdQualification"
        >
          <el-table :data="three" highlight-current-row style="width: 100%">
            <!-- <el-table-column type="index" width="200"> </el-table-column> -->
            <el-table-column property="zizhi" label="资质种类">
            </el-table-column>
            <el-table-column property="date" label="到期时间">
            </el-table-column>
            <template slot="empty">
              <el-empty description="暂无资质"></el-empty>
            </template>
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          :label="'不分等级(' + num4 + ')'"
          name="fifth"
          class="noQualification"
        >
          <el-table :data="no" highlight-current-row style="width: 100%">
            <!-- <el-table-column type="index" width="200"> </el-table-column> -->
            <el-table-column property="zizhi" label="资质种类">
            </el-table-column>
            <el-table-column property="date" label="到期时间">
            </el-table-column>
            <template slot="empty">
              <el-empty description="暂无资质"></el-empty>
            </template>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>

<script>
import { getCompanyDetailApi } from '@/api/company'
export default {
  name: 'company-detail',
  props: {
    cname: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      activeName: 'first',
      lperson: '',
      tycode: '',
      rmoney: '',
      address: '',
      anxudate: '',
      // 工商注册信息
      information: [],
      // 一级资质
      one: [],
      // 二级资质
      two: [],
      // 三级资质
      three: [],
      // 不分等级
      no: [],
      num1: '',
      num2: '',
      num3: '',
      num4: '',
      LS: { 'word-break': 'keep-all' },
      CS: { 'max-width': '750px', 'word-break': 'break-all' },
      isActive: false,
      statusTitle: '',
      company_id: 0,
      // intend: 0
      intendStatus: null,
      dealStatus: null
    }
  },
  created () {
    this.getCompanyDetail()
  },
  methods: {
    // 查看公司详情
    async getCompanyDetail () {
      // console.log(this.cname)
      const { data: res } = await getCompanyDetailApi(this.cname)
      // console.log('查看公司详情', data)
      this.lperson = res.data.information[0].lperson
      this.tycode = res.data.information[0].tycode
      this.rmoney = res.data.information[0].rmoney
      this.address = res.data.information[0].address
      this.anxudate = res.data.information[0].anxudate
      this.information = res.data.information
      this.company_id = res.data.information[0].id
      // this.intend = data.data.intend[0].intend
      // if (this.intend !== 0) {
      //   this.isActive = true
      // }
      // 调用更改公司工商信息的key的方法 更改成中文key
      if (res.data.dealStatus === 1) {
        this.isActive = true
        this.statusTitle = '成交客户'
      } else if (res.data.intendStatus === 1) {
        this.isActive = true
        this.statusTitle = '意向客户'
      } else {
        this.statusTitle = '暂未联系'
      }

      this.changeInformationTitle()
      this.one = [...res.data.one]
      this.two = [...res.data.two]
      this.three = [...res.data.three]
      this.no = [...res.data.no]
      this.num1 = res.data.num1[0].y
      this.num2 = res.data.num2[0].e
      this.num3 = res.data.num3[0].s
      this.num4 = res.data.num4[0].n
    },
    // 返回上一页  判断从哪里页面过来的
    closeCompanyDetail () {
      // this.$router.push('/enterprise')
      this.$router.go(-1)
    },
    // 更改公司工商信息的key
    changeInformationTitle () {
      const informationTitle = {
        cname: '企业名称',
        lperson: '法定代表人',
        setdate: '成立日期',
        bstatus: '经营状态',
        daterange: '经营期限',
        djjg: '登记机关',
        rmoney: '注册资本',
        anxudate: '安许',
        tycode: '统一信用代码',
        mobile: '电话',
        busirange: '经营范围'
      }
      const newInformation = {}
      for (const key in informationTitle) {
        // 中文key
        const chineseKey = informationTitle[key]
        for (let k in this.information[0]) {
          k = chineseKey
          // this.information[0][k] = this.information[0][key]
          // console.log(this.information[0])
          newInformation[k] = this.information[0][key]
        }
      }
      this.information[0] = Object.assign(newInformation)
    }
  }
}
</script>

<style lang="scss" scoped>
.companydetail-container {
  // height: 877px;
  padding: 0 150px;
  border: none;
  ::v-deep .el-card__body {
    padding: 0;
  }
  .el-divider--horizontal {
    margin-top: 10px;
  }

  .companydetail-header {
    display: flex;
    justify-content: space-between;
    .el-button:nth-child(1) {
      ::before {
        content: '<';
      }
    }
    .collect {
      display: flex;
      align-items: center;
      line-height: 20px;
      i {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        color: #409eff;
        padding: 5px;
        font-size: 15px;
        background-color: #fff;
        margin-right: 10px;
        box-shadow: 2px 2px 10px #ccc;
        &.active {
          margin-right: 10px;
          background-color: #fec635;
          box-shadow: 2px 2px 10px #ccc;
          color: #fff;
        }
      }
      span {
        font-size: 15px;
        color: #409eff;
      }
    }
  }
  .companyTab {
    margin-bottom: 20px;
  }
}
</style>
